<template>
    <div style="height: 1000px;">
        <el-button @click="open">打开</el-button>
        <el-button @click="change">change</el-button>
        <VoSchemaForm :model="model" :schema="schema">
            <div>
                <el-button type="primary" @click="save">确定</el-button>
            </div>
        </VoSchemaForm>
    </div>
</template>

<script>
import TestComponent from './test-comonent.vue'

export default {
    data() {
        return {
            model: {},
            schema: {
                properties: {
                    name: {
                        label: '名称',
                        widget: 'input',
                        ui: {
                            placeholder: '请输入'
                        }
                    },
                    select: {
                        label: '性别',
                        widget: 'select',
                        enum: [
                            { label: '男', value: '男' },
                            { label: '女', value: '女' },
                        ],
                        ui: {
                            style: {
                                width: '100%'
                            }
                        }
                    }
                }
            },
            schema2: {
                properties: {
                    like: {
                        label: '爱好',
                        widget: 'checkbox',
                        enum: [
                            { label: '篮球', value: '篮球' },
                            { label: '足球', value: '足球' },
                            { label: '乒乓球', value: '乒乓球' },
                            { label: '羽毛球', value: '羽毛球' },
                            { label: '网球', value: '网球' },
                            { label: '棒球', value: '棒球' },
                            { label: '排球', value: '排球' },
                        ]
                    },
                }
            }
        }
    },
    methods: {
        open() {
            this.$dialog.create(TestComponent, {
                ref: 'testRef',
                props: {
                    name: '我是传入的props'
                }
            }, {
                title: '新增会员',
                width: '600px',
                voFooter: true,
                voOnOk(cb, refs) {
                    return new Promise((resolve, reject) => {
                        refs.testRef.save((boo) => {
                            console.log(boo);
                            if (boo) {
                                resolve()
                            } else {
                                reject(new Error('is error'))
                            }
                        })
                    })
                }
            }, this).then(res => {
                console.log('响应', res);
            })
        },
        change() {
            this.schema = {
                properties: {
                    ...this.schema.properties,
                    ...this.schema2.properties
                },
                ui: {
                    labelWidth: '100px',
                    disabled: true
                },
                col: {
                    span: 8
                }
            }
        },
        save() {
            console.log(this.model);
        }
    }
}
</script>

<style lang="scss" scoped>
/deep/ .my-dialog{
    background: skyblue;
}
</style>
